//1.渲染列表
! function renderlist() {
    $.ajax({
        url: 'http://localhost/taobao/php/list.php',
        dataType: 'json',
    }).done(function(data) {
        //一.渲染商品列表
        let arrData = data.pagecontent; //接口数据
        let str = '';
        $.each(arrData, function(index, value) { //数组的索引和值
            //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
            str += `
                <li>
                    <a href="detail.html?sid=${value.sid}">
                        <img data-original="${value.url}" class="lazy"/>
                        <p>${value.title}</p>
                        <span>￥${value.price}</span>
                        <span>${value.sailnumber}</span>
                    </a>
                </li>
            `;
        });
        $('.list ul').html(str);

        //二.渲染图片下面实现懒加载 - 前端优化
        //1.懒加载适合图片渲染加载，中心思想是图片进入可视区再加载
        //原理：将图片的地址绑定在一个自定义属性中，等到当前图片进入了可视区将自定义属性变成src。

        //2.懒加载效果 - jquery.lazyload.js插件
        //给每一个img标签添加自定义属性data-original  
        //给每一个img标签添加一个类名lazy
        //使用懒加载的代码
        $('.lazy').lazyload({ effect: "fadeIn" });

        //三.分页插件的使用 - https://www.jq22.com/yanshi5697/
        $('.page').pagination({
            pageCount: data.pagesize,
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function(api) {
                console.log(api.getCurrent()); //获取当前点击的页面
                //将页面传输给后端，后端返回对应的数据，重新进行渲染。
                $.ajax({
                    url: 'http://localhost/taobao/php/list.php',
                    data: {
                        page: api.getCurrent()
                    },
                    dataType: 'json',
                }).done(function(data) {
                    let arrData = data.pagecontent; //接口数据
                    let str = '';
                    $.each(arrData, function(index, value) { //数组的索引和值
                        //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                        str += `
                                <li>
                                    <a href="detail.html?sid=${value.sid}">
                                        <img data-original="${value.url}" class="lazy"/>
                                        <p>${value.title}</p>
                                        <span>￥${value.price}</span>
                                        <span>${value.sailnumber}</span>
                                    </a>
                                </li>
                            `;
                    });
                    $('.list ul').html(str);
                    $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
                });
            }
        });



        //四.排序
        //一旦点击按钮，都要从第一页开始
        //默认排序
        $('button').eq(0).on('click', function() {
            //点击排序重置第一页。
            $('.page').pagination({
                pageCount: data.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    console.log(api.getCurrent()); //获取当前点击的页面
                    //将页面传输给后端，后端返回对应的数据，重新进行渲染。
                    $.ajax({
                        url: 'http://localhost/taobao/php/list.php',
                        data: {
                            page: api.getCurrent()
                        },
                        dataType: 'json',
                    }).done(function(data) {
                        let arrData = data.pagecontent; //接口数据
                        let str = '';
                        $.each(arrData, function(index, value) { //数组的索引和值
                            //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                            str += `
                                    <li>
                                        <a href="detail.html?sid=${value.sid}">
                                            <img data-original="${value.url}" class="lazy"/>
                                            <p>${value.title}</p>
                                            <span>￥${value.price}</span>
                                            <span>${value.sailnumber}</span>
                                        </a>
                                    </li>
                                `;
                        });
                        $('.list ul').html(str);
                        $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
                    });
                }
            });

            //重新渲染
            $.ajax({
                url: 'http://localhost/taobao/php/list.php',
                data: {
                    page: 1
                },
                dataType: 'json',
            }).done(function(data) {
                let arrData = data.pagecontent; //接口数据
                let str = '';
                $.each(arrData, function(index, value) { //数组的索引和值
                    //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                    str += `
                                <li>
                                    <a href="detail.html?sid=${value.sid}">
                                        <img data-original="${value.url}" class="lazy"/>
                                        <p>${value.title}</p>
                                        <span>￥${value.price}</span>
                                        <span>${value.sailnumber}</span>
                                    </a>
                                </li>
                            `;
                });
                $('.list ul').html(str);
                $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
            });

        });

        //升序排列

        $('button').eq(1).on('click', function() {
            //点击排序重置第一页。
            $('.page').pagination({
                pageCount: data.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(api) {
                    console.log(api.getCurrent()); //获取当前点击的页面
                    //将页面传输给后端，后端返回对应的数据，重新进行渲染。
                    $.ajax({
                        url: 'http://localhost/taobao/php/list.php',
                        data: {
                            page: api.getCurrent(),
                            sort: true
                        },
                        dataType: 'json',
                    }).done(function(data) {
                        let arrData = data.pagecontent; //接口数据
                        let str = '';
                        $.each(arrData, function(index, value) { //数组的索引和值
                            //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                            str += `
                                    <li>
                                        <a href="detail.html?sid=${value.sid}">
                                            <img data-original="${value.url}" class="lazy"/>
                                            <p>${value.title}</p>
                                            <span>￥${value.price}</span>
                                            <span>${value.sailnumber}</span>
                                        </a>
                                    </li>
                                `;
                        });
                        $('.list ul').html(str);
                        $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
                    });
                }
            });

            //重新渲染
            $.ajax({
                url: 'http://localhost/taobao/php/list.php',
                data: {
                    page: 1,
                    sort: true
                },
                dataType: 'json',
            }).done(function(data) {
                let arrData = data.pagecontent; //接口数据
                let str = '';
                $.each(arrData, function(index, value) { //数组的索引和值
                    //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                    str += `
                                <li>
                                    <a href="detail.html?sid=${value.sid}">
                                        <img data-original="${value.url}" class="lazy"/>
                                        <p>${value.title}</p>
                                        <span>￥${value.price}</span>
                                        <span>${value.sailnumber}</span>
                                    </a>
                                </li>
                            `;
                });
                $('.list ul').html(str);
                $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
            });

        });


    });
}();